<template>
  <div class="Comment-div">
    <!-- 卡片 -->
    <el-card class="comment-container">
      <!-- 按钮 -->
      <el-row>
        <el-col :span="8">
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            :disabled="!multipleSelection.length"
            @click="handleDel"
            >批量删除</el-button
          >
        </el-col>
        <el-col :span="10" :offset="6">
          <span class="title">用户名称</span>
          <el-input
            v-model="name"
            size="small"
            placeholder="请输入用户名称"
          ></el-input>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="handleFind"
            >查找</el-button
          >
          <el-button
            type="success"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        border
        height="550px"
        stripe
        fit
        :data="commentList"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
        :cell-style="centerStyle"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :default-sort="{
          prop: 'com_createdTime',
          order: 'descending',
        }"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="id" prop="c_id" width="47px"></el-table-column>
        <el-table-column label="头像" width="100px">
          <template slot-scope="coms">
            <el-avatar
              shape="square"
              :size="55"
              :src="
                coms.row.avatar == null
                  ? '/avatar.jpg'
                  : baseUrl + coms.row.avatar
              "
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="评论用户" prop="nickname" width="100px">
        </el-table-column>
        <el-table-column label="所属文章" prop="article_title">
        </el-table-column>
        <el-table-column label="评论内容" prop="comment"> </el-table-column>
        <el-table-column
          label="评论时间"
          width="185px"
          prop="com_createdTime"
          sortable
        >
          <template slot-scope="coms">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              coms.row.com_createdTime
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template v-slot="rowInfo">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              style="padding: 7px 10px"
              @click="handleDel(rowInfo.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div
        class="pagination-container"
        style="float: right; margin-bottom: 15px; margin-top: 15px"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Comments",
  data() {
    return {
      commentList: [],
      size: 5, //每页显示条数
      page: 1, // 当前页码
      total: 0, //总记录数
      baseUrl: "http://localhost:3000/", //后端地址
      formLabelWidth: "100px", //label宽度
      id: 1, //保存登录id
      name: "", //搜索框内容
      multipleSelection: [],
    };
  },
  created() {
    this.id = sessionStorage.getItem("id");
    this.getComments();
  },
  methods: {
    // 表格内容居中统一样式
    centerStyle() {
      return "text-align:center";
    },
    getComments() {
      // GET /comments/getComments?page=1&size=4
      this.$http
        .get("/comments/getComments", {
          params: {
            page: this.page,
            size: this.size,
            nickname: this.name,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.commentList = res.result.rows;
            this.total = res.result.total;
          }
        });
    },
    // 改变条数时,执行回调
    handleSizeChange(size) {
      this.size = size;
      // 发请求
      this.getComments();
    },
    // 改变当前页码,执行回调
    handleCurrentChange(page) {
      this.page = page;
      this.getComments();
    },
    // 删除评论
    handleDel(row) {
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          if (row.c_id) {
            ids.push(row.c_id);
          } else {
            this.multipleSelection.forEach((item) => {
              ids.push(item.c_id);
            });
          }
          // 删除评论
          this.$http
            .delete(`/comments/deleted`, { data: { ids } })
            .then((res) => {
              if (res.code == 0) {
                this.getComments();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查找用户评论
    handleFind() {
      if (this.name != "") {
        this.getComments();
        this.name = "";
      } else {
        this.$message.error("搜索名称不能为空!");
      }
    },
    // 重置表格
    resetQuery() {
      this.name = "";
      this.getComments();
    },
    // 选择改变时回调
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="stylus" scoped>
.Comment-div
  user-select: none
  .comment-container
    margin-top: 20px
    min-height: 400px
    .el-col
      .title
        font-size:14px
        font-weight:700
        color: #606266
        margin-left: 48px
      .el-input
        width: 50%
        margin-right: 10px
        margin-left: 10px
      .el-button
        padding:7px 10px
    .el-table
      margin-top: 30px
      &>>>th.el-table__cell>.cell
        text-align: center
        font-weight:bold
      &>>>.el-avatar
        img
          width: 55px
</style>
